<script>
import courseBase from "@/assets/json/CourseBase.json";
import docBase from "@/assets/json/DocBase.json";
import {getResourceURL} from "../axiosConfig";

export default {
  mounted() {
    // 当组件挂载时，从 localStorage 读取 userId
    this.userId = localStorage.getItem('userId') || '234567';
  },
  data() {
    return {
      userId: '',
      courseItems4DX: courseBase.slice(1, 4),
      courseItems4XY: courseBase.slice(6, 9),
      docItems4DX: docBase.slice(0, 4),
      docItems4XY: docBase.slice(5, 8),
    }
  },
  props: {
    category: {
      type: String,
      required: true
    },
  },
  methods: {
    getResourceURL,
    getSvgImage(description, color) {
      // 根据描述和颜色生成对应的SVG图片
      if(color==="pptx"){
        color = "#BD3718";
      } else if(color==="pdf"){
        color = "#B30B00";
      } else if(color==="docx"){
        color = "#134EB3";
      } else if(color==="xlsx") {
        color = "#0E753B";
      }
      const encodedDescription = encodeURIComponent(description);
      const encodedColor = encodeURIComponent(color);
      return `data:image/svg+xml,%3Csvg width='320' height='180' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EDrawing%3C/title%3E%3Cg%3E%3Ctitle%3ELayer 1%3C/title%3E%3Crect id='svg_3' height='191.07122' width='382.49958' y='-2.5001' x='-5.00017' stroke-width='0' stroke='%23000' fill='${encodedColor}'/%3E%3Ctext transform='matrix(1.28664 0 0 1.28664 -13.9226 -27.9567)' stroke='%23000' xml:space='preserve' text-anchor='start' font-family='Noto Sans JP' font-size='24' id='svg_2' y='97.37594' x='22.47896' stroke-width='0' fill='%23ffffff'%3E${encodedDescription}%3C/text%3E%3Crect id='svg_4' height='2.14285' width='23.21426' y='101.42836' x='113.21399' stroke-width='0' stroke='%23000' fill='${encodedColor}'/%3E%3C/g%3E%3C/svg%3E`;
    },
  }
};
</script>

<template>
  <card>
    <div style="height: auto;">
      <h3>
        <slot name="title"></slot>
      </h3>
      <a class="row recommend-class-item" :href="'#/detail/course/' + item.id" target="_blank"
         style="margin: auto"
         v-for="item in courseItems4DX"
         :key="item.id"
         v-if="category==='course'&&userId==='123456'">
        <div class="col-auto">
          <img :alt="item.title" :src=getResourceURL(item.img) style="height: 4.5rem"/>
        </div>
        <div class="col">
          <h5 class="recommend-title">{{ item.title }}</h5>
        </div>
      </a>
      <a v-for="item in courseItems4XY" v-if="category==='course'&&userId==='234567'" :key="item.id"
         :href="'#/detail/course/' + item.id"
         class="row recommend-class-item"
         style="margin: auto"
         target="_blank">
        <div class="col-auto">
          <img :alt="item.title" :src=getResourceURL(item.img) style="height: 4.5rem"/>
        </div>
        <div class="col">
          <h5 class="recommend-title">{{ item.title }}</h5>
        </div>
      </a>
      <a class="row recommend-class-item" :href="'#/detail/doc/' + item.id" target="_blank"
         style="margin: auto"
         v-for="item in docItems4DX"
         :key="item.id"
         v-if="category==='doc' &&userId==='123456'" >
        <div class="col-auto">
          <img :src=getSvgImage(item.title,item.type) alt="Card image cap" style="height: 4.5rem"/>
        </div>
        <div class="col">
          <h5 class="recommend-title">{{ item.title }}</h5>
        </div>
      </a>
      <a v-for="item in docItems4XY" v-if="category==='doc' && userId==='234567'" :key="item.id"
         :href="'#/detail/doc/' + item.id"
         class="row recommend-class-item"
         style="margin: auto"
         target="_blank">
        <div class="col-auto">
          <img :src=getSvgImage(item.title,item.type) alt="Card image cap" style="height: 4.5rem"/>
        </div>
        <div class="col">
          <h5 class="recommend-title">{{ item.title }}</h5>
        </div>
      </a>
    </div>
  </card>
</template>

<style scoped>
.recommend-title {
  padding: 0 0.5rem;
}

.recommend-class-item {
  margin-bottom: 1rem !important;
}

.recommend-class-item .col-auto {
  padding: 0;
}

.recommend-class-item .col {
  padding: 0;
}
</style>
